<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <title>My-Watch-Phone</title>
        <link rel="stylesheet" href="./assets/css/newWatchTemp.css">
        <script type="text/javascript" src="./assets/js/function.js"></script>
        <script type="text/javascript" src="./assets/js/dom.js"></script>
        <script type="text/javascript" src="./assets/js/timeGeneration.js"></script>
    </head>
    <body>
        <!-- 调用搜狐接口获取客户端公网ip，赋值给全局变量，要在内容加载的js前面执行 -->
        <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
        <script>
            /*
            * var returnCitySN = {"cip": "200.143.238.130", "cid": "320500", "cname": "江苏省苏州市"};
            * cip:IP地址
            * cid:城市代码
            * cname:城市位置
            */
            const cip = returnCitySN["cip"];
        </script>
        <div class="main" id="main">
            <div class="main-attach" id="main-attach">
                <div class="watch-head" id="watch-head">
                    <div class="head-left" id="head-left">
                        <div class="energy-ico" id="energy-ico">
                            <div id="energy-ico-ico"></div>
                        </div>
                        <div class="energy-value" id="energy-value"><p id="energy-value-text" class="text-content">100%</p></div>
                    </div>
                    <div class="head-right" id="head-right">
                        <div class="air" id="air">
                            <div class="air-quality" id="air-quality"><p id="air-quality-text" class="text-content head-right-text"></p></div>
                            <div class="pm25" id="pm25"><p id="pm25-text" class="text-content head-right-text"></p></div>
                        </div>
                        <div class="ll" id="ll">
                            <div class="ll-t" id="ll-t">
                                <div class="weather" id="weather"><p id="weather-text" class="text-content head-right-text">阴</p></div>
                                <div class="temperature-upper" id="temperature-upper"><p id="temperature-upper-text" class="text-content head-right-text">21℃</p></div>
                                <div class="temperature-upper-ico" id="temperature-upper-ico">
                                    <div id="temperature-upper-ico-ico"></div>
                                </div>
                            </div>
                            <div class="ll-b" id="ll-b">
                                <div class="temperature-current" id="temperature-current"><p id="temperature-current-text" class="text-content head-right-text">20℃</p></div>
                                <div class="temperature-lower" id="temperature-lower"><p id="temperature-lower-text" class="text-content head-right-text">17℃</p></div>
                                <div class="temperature-lower-ico" id="temperature-lower-ico">
                                    <div id="temperature-lower-ico-ico"></div>
                                </div>
                            </div>
                        </div>
                        <div class="weather-ico" id="weather-ico">
                            <div id="weather-ico-ico"></div>
                        </div>
                    </div>
                </div>
                <div class="watch-body" id="watch-body">
                    <div class="body-top" id="body-top">
                        <div class="watch-time" id="watch-time">
                            <div class="time-hh time-h" id="time-hh"></div>
                            <div class="time-hl time-h" id="time-hl"></div>
                            <div class="rect" id="rect"></div>
                            <div class="time-mh time-m" id="time-mh"></div>
                            <div class="time-ml time-m" id="time-ml"></div>
                            <div class="time-sh time-s" id="time-sh"></div>
                            <div class="time-sl time-s" id="time-sl"></div>
                        </div>
                    </div>
                    <div class="body-bottom" id="body-bottom">
                        <div class="body-draw" id="body-draw">
                            <div class="draw-image" id="draw-image"></div>
                        </div>
                    </div>
                </div>
                <div class="watch-boot" id="watch-boot">
                    <div class="boot-top" id="boot-top">
                        <div class="sleep-title" id="sleep-title"><p id="sleep-title-text" class="text-content boot-top-text boot-title-text">睡眠</p></div>
                        <div class="sleep-time" id="sleep-time"><p id="sleep-time-text" class="text-content boot-top-text boot-value-text">-----</p></div>
                        <div class="distance-title" id="distance-title"><p id="distance-title-text" class="text-content boot-top-text boot-title-text">距离</p></div>
                    </div>
                    <div class="boot-bottom" id="boot-bottom">
                        <div class="distance-value" id="distance-value"><p id="distance-value-text" class="text-content boot-bottom-text boot-value-text">-----</p></div>
                    </div>
                </div>
            </div>
        </div>

    </body>
</html>